<template>
        <el-card shadow="never" style="max-height: 70vh; overflow: auto">
            <el-form ref="form" :model="form" :rules="rules" label-width="90px" :disabled="disabled">
                <el-form-item label="id:" prop="id" v-show="false">
                    <el-input v-model="form.id" disabled />
                </el-form-item>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="所属用户:" prop="user_id">
                            <SelectPage v-model="form.user_id" :url="'/admin/user/selectPage'" show_field="nickname" show_id="uid" query_field="uid" :multiple="false" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="真实姓名:" prop="realname">
                            <el-input v-model="form.realname" placeholder="请输入真实姓名" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="手机号码:" prop="mobile">
                            <el-input v-model="form.mobile" placeholder="请输入手机号码" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" v-if="false">
                        <el-form-item label="微信号:" prop="wechat">
                            <el-input v-model="form.wechat" placeholder="请输入微信号" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" v-if="false">
                        <el-form-item label="支付宝:" prop="alipay">
                            <el-input v-model="form.alipay" placeholder="请输入支付宝账号" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="身份证号:" prop="idcard">
                            <el-input v-model="form.idcard" placeholder="请输入身份证号" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="正面:" prop="idcard_just">
                            <ImageUpload v-model="form.idcard_just" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="背面:" prop="idcard_back">
                            <ImageUpload v-model="form.idcard_back" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="自我介绍:" prop="about">
                    <el-input type="textarea" :rows="2" placeholder="请输入自我介绍" v-model="form.about"></el-input>
                </el-form-item>
                <el-form-item label="个人照片:">
                    <div>
                        <div class="personal_photo-item" v-for="(el, idx) in form.personal_photo" :key="idx">
                            <el-image :src="el.image" :preview-src-list="allImageList" :initial-index="idx" style="width: 148px; height: 148px"></el-image>
                            <div class="personal_photo-item-tag">{{ el.category_text }}</div>
                        </div>
                    </div>
                </el-form-item>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="状态:" prop="status">
                            <el-select v-model="form.status" placeholder="请选择状态" clearable>
                                <el-option v-for="(item, index) in status" :key="index" :label="item.label" :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="未通过原因:" prop="fail_content" v-if="form.status === 3">
                            <el-input v-model="form.fail_content" placeholder="请输入未通过原因" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="擅长分类:" prop="verify_time">
                            <el-tag :key="idx"
                                    v-for="(el, idx) in form.categorys"
                                    :disable-transitions="false">
                                {{el.category2_text}}
                            </el-tag>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="审核时间:" prop="verify_time" v-if="disabled">
                            <el-date-picker v-model="form.verify_time" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择审核时间" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="服务中:" prop="in_progress_order" v-if="disabled">
                            <el-input-number v-model="form.in_progress_order" :step="1" :min="0"></el-input-number>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="接单量:" prop="order_quantity" v-if="disabled">
                            <el-input-number v-model="form.order_quantity" :step="1" :min="0"></el-input-number>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="评论数:" prop="comment_count" v-if="disabled">
                            <el-input-number v-model="form.comment_count" :step="1" :min="0"></el-input-number>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="好评数:" prop="comment_how_count" v-if="disabled">
                            <el-input-number v-model="form.comment_how_count" :step="1" :min="0"></el-input-number>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="好评率:" prop="comment_how_svg" v-if="disabled">
                            <el-input-number v-model="form.comment_how_svg" :step="0.01" :min="0"></el-input-number>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item>
                    <el-button type="primary" @click="submitForm">确认 </el-button>
                    <el-button type="warning" @click="cancel">取消 </el-button>
                </el-form-item>
            </el-form>
        </el-card>
</template>

<script>
import { regionData } from 'element-china-area-data'
export default {
    name: 'EditForm',
    props: {
        findFormData: {
            type: Object,
            default: {}
        },
        editFormParams: {
            type: Object,
            default: {}
        },
        // 表单是否禁用
        disabled: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            // 编辑表单验证规则
            rules: {
                user_id: [{ required: true, message: "请输入所属用户", trigger: "blur" }],
                realname: [{ required: true, message: "请输入真实姓名", trigger: "blur" }],
                mobile: [{ required: true, message: "请输入手机号码", trigger: "blur" }],
                wechat: [{ required: true, message: "请输入微信号", trigger: "blur" }],
                alipay: [{ required: true, message: "请输入支付宝账号", trigger: "blur" }],
                idcard: [{ required: true, message: "请输入身份证号", trigger: "blur" }],
                idcard_just: [{ required: true, message: "请输入正面", trigger: "blur" }],
                idcard_back: [{ required: true, message: "请输入背面", trigger: "blur" }],
                about: [{ required: true, message: "请输入自我介绍", trigger: "blur" }],
                // order_quantity: [{ required: true, message: "请输入接单量", trigger: "blur" }],
                // comment_count: [{ required: true, message: "请输入评论数", trigger: "blur" }],
                // comment_how_count: [{ required: true, message: "请输入好评数", trigger: "blur" }],
                // comment_how_svg: [{ required: true, message: "请输入好评率", trigger: "blur" }],
            },
            form: {
                personal_photo: {}
            },
            // 区域选择配置
            areaOptions: regionData,
            status:[
               { label: "审核中", value: 1 },
               { label: "审核通过", value: 2 },
               { label: "审核失败", value: 3 },
            ],

        }
    },
    computed: {
        allImageList() {
            return this.form.personal_photo.map(el=>{
                return el.image
            })
        }
    },
    watch: {
        findFormData: {
           handler(nval) {
                if (JSON.stringify(nval) !== '{}') {
                    this.$nextTick(() => {
                        this.form = nval
                    })
                }else{
                    this.form.personal_photo = []
                }
            },
            immediate: true,
            deep: false,
        },
    },
    methods: {
        // 取消按钮
        cancel() {
            this.$emit('editFormCancel')
        },
        submitForm() {
            this.$refs['form'].validate((valid, obj) => {
                if (valid) {
                    this.$emit('submitForm', this.form)
                }
            })
        },
        // 表单重置
        reset() {
            this.resetForm('form')
        },
        handleCategoryDel(idx, el) {
        }
    }
}
</script>
<style lang="scss">
.personal_photo-item {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 148px;
    height: 148px;
    margin-right: 6px;
    margin-bottom: 6px;
    .personal_photo-item-tag{
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        padding: 4px 0;
        line-height: 1;
        text-align: center;
        color: #fff;
        font-size: 14px;
        background: rgba(0, 0, 0, .7);
    }
}
</style>
